<template>
  <div>
    <Header></Header>
    <div class="rank">
      <aside class="content">
        <el-tabs :tab-position="tabPosition">
          <el-tab-pane label="推荐榜" class="r_right">
            <div class="header">
              <div class="recommand">
                <p>推荐榜</p>
              </div>
              <div class="t-recommand">
                <p style="font-size: 30px; padding-top: 10px">推荐榜</p>
                <p style="padding-top: 15px">最近更新:6月15日</p>
                <el-row style="padding-top: 15px">
                  <el-button type="primary" icon="el-icon-video-play" size="small">播放</el-button>
                </el-row>
              </div>
            </div>
            <div class="list">
              <p>歌曲列表</p>
              <el-table :data="recommendSong" style="width: 100%" stripe @row-click="rowClick">
                <el-table-column type="index" label="序号" width="60"></el-table-column>
                <el-table-column prop="songName" label="歌曲名字" width="200"></el-table-column>
                <el-table-column prop="duration" label="时长" width="100"></el-table-column>
                <el-table-column prop="composer" label="作曲者"></el-table-column>
                <el-table-column prop="lyricist" label="作词者"></el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="热门榜" class="r_right">
            <div class="header">
              <div class="recommand">
                <p>热门榜</p>
              </div>
              <div class="t-recommand">
                <p style="font-size: 30px; padding-top: 10px">热门榜</p>
                <p style="padding-top: 15px">最近更新:6月15日</p>
                <el-row style="padding-top: 15px">
                  <el-button type="primary" size="small" icon="el-icon-video-play">播放</el-button>
                </el-row>
              </div>
            </div>
            <div class="list">
              <p>歌曲列表</p>
              <el-table :data="hotSong" style="width: 100%" stripe @row-click="rowClick">
                <el-table-column type="index" label="序号" width="60"></el-table-column>
                <el-table-column prop="click" label="歌曲播放量" sortable width="120"></el-table-column>
                <el-table-column prop="song.songName" label="歌曲标题" width="180"></el-table-column>
                <el-table-column prop="song.duration" label="时长" width="100"></el-table-column>
                <el-table-column prop="song.composer" label="作曲者"></el-table-column>
                <el-table-column prop="song.lyricist" label="作词者"></el-table-column>
                <!-- <el-table-column prop="address" width="120" label="操作">
                  <template slot-scope="scope">
                    <el-button icon="el-icon-video-play" size="mini" circle @click="playSong(scope.row.id)">
                      <audio muted src="" autoplay="autoplay" loop></audio>
                    </el-button>
                    <el-button icon="el-icon-folder-add" size="mini" circle></el-button>
                  </template>
                </el-table-column> -->
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </aside>
    </div>
  </div>
</template>

<script>
import { reqRecommendSong, reqHotSong } from '@/api/index'
export default {
  name: "Ranking",
  data() {
    return {
      tabPosition: "left",
      songUrl: '',
      recommendSong: [],
      hotSong: []
    };
  },
  methods: {
    rowClick(row) {
      const id = row.songId || row.id
      const songName = row.songName || row.song.songName
      this.$router.push({
        path: `/song/${id}/${songName}`
      })
    },
    formatter(row, column) {
      return row.address;
    },
    playSong(id) {
      this.$router.push({
        path: `/song/${id}`
      })
    }
  },
  created() {
    reqRecommendSong().then(res => {
      this.recommendSong = res.rows
    })
    reqHotSong().then(res => {
      this.hotSong = res.rows
    })
  }
};
</script>

<style lang="less" scoped>
.rank {
  width: 1080px;
  margin: 0 auto;
  background-color: pink;

  .content {
    font-size: 20px;
    padding-top: 40px;
    color: black;
    background-color: rgb(255, 255, 255);
    border-right: 1px solid rgb(204, 203, 203);
    border-left: 1px solid rgb(210, 210, 210);
  }
}

.r_right {
  margin-left: 20px;

  .header {
    display: flex;

    .recommand {
      width: 150px;
      height: 150px;
      float: left;
      background-color: blue;
      text-align: center;
      line-height: 150px;
      font-size: 40px;
      color: white;
    }

    .t-recommand {
      width: 42vw;
      float: left;
      padding-left: 25px;
    }
  }

  .list {
    margin-top: 50px;
    width: 768px;
    height: 100%;
  }
}

/deep/ .el-tabs__nav {
  width: 200px;
  border-left: 1px soild rgb(210, 210, 210);
  height: 600px;
}

/deep/ .el-tabs__item {
  font-size: 20px;
  text-align: center !important;
}
/deep/ .el-table__row {
  cursor: pointer;
}
</style>